<template>
  <div>
    <!-- 添加 el-link 组件用于触发模态框 -->
    <el-link
      v-if="props.linkText || props.url"
      type="primary"
      :underline="underline"
      @click="showModal"
      class="modal-trigger-link"
    >
      {{ linkText }}
    </el-link>

    <vxe-modal
      v-model="isVisible"
      width="70vw"
      height="80vh"
      :title="modalTitle"
      :mask="false"
      :destroy-on-close="true"
      :remember="true"
      :lock-scroll="true"
      :lock-view="false"
      :show-zoom="true"
      :resize="true"
    >
      <div v-if="!props.url" class="empty-state">
        <p>{{ $t('common.message.noUrl') || '未提供URL' }}</p>
      </div>
      <iframe
        v-else
        :src="targetUrl"
        class="modal-iframe"
        frameborder="0"
        @load="onIframeLoad"
        @error="onIframeError"
      />
    </vxe-modal>
  </div>
</template>

<script setup>
/**
 * 弹窗组件 - 用于在模态框中展示带有查询参数的页面
 *
 * 功能特性：
 * - 自动添加 nolayout=1 参数以适配嵌入式显示
 * - 支持自定义标题和URL
 * - 提供错误处理和空状态显示
 * - 响应式设计，支持缩放和调整大小
 * - 支持通过 el-link 组件直接点击打开模态框
 *
 * @example
 * <ra-modal-iframe
 *   url="/admin/dict-data?id=3"
 *   title="字典数据管理"
 *   link-text="查看详情"
 * />
 */
import { computed, ref } from 'vue';
import { smartTranslate as $t } from '@/lang';

// 组件属性定义
const props = defineProps({
  /** 要显示的页面URL路径 */
  url: {
    type: String,
    default: '',
  },
  /** 模态框标题 */
  title: {
    type: String,
    default: '查看详情',
  },
  /** 链接显示文本 */
  linkText: {
    type: String,
    default: '查看详情',
  },
  /** 链接类型 */
  linkType: {
    type: String,
    default: 'primary',
    validator: (value) =>
      ['primary', 'success', 'warning', 'danger', 'info', 'default'].includes(
        value,
      ),
  },
  /** 是否显示下划线 */
  underline: {
    type: String,
    default: 'never',
  },
});

// 响应式状态
const isVisible = ref(false);

// 计算属性
const modalTitle = computed(() => {
  return props.title || $t('common.title.select') || '选择';
});

const linkText = computed(() => {
  return props.linkText || props.title || $t('common.action.view') || '查看';
});

const targetUrl = computed(() => {
  if (!props.url) return '';

  try {
    const host = window.location.origin;
    const hasQuery = props.url.includes('?');
    const separator = hasQuery ? '&' : '?';

    return `${host}/#${props.url}${separator}nolayout=1&selection=1`;
  } catch (error) {
    console.error('生成目标URL时出错:', error);
    return '';
  }
});

// 事件处理
const onIframeLoad = () => {
  // iframe加载完成后的处理逻辑
  console.log('iframe加载完成');
};

const onIframeError = (error) => {
  console.error('iframe加载失败:', error);
};

// 模态框控制方法
const showModal = () => {
  isVisible.value = true;
};

const hideModal = () => {
  isVisible.value = false;
};

// 暴露的方法（保持向后兼容）
defineExpose({
  show: showModal,
  hide: hideModal,
});
</script>

<style scoped>
.modal-trigger-link {
  cursor: pointer;
}

.modal-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  background-color: #fff;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 14px;
}

.empty-state p {
  margin: 0;
  text-align: center;
}
</style>
